<template>
	<!-- 首页标题栏、轮播图整合 -->
	<view class="banner-swiper-wrap u-m-b-10">
		<!-- 标题栏 -->
		<!-- <view class="u-navbar u-navbar-fixed" :style="[navbarStyle]">
			<view class="u-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="u-navbar-inner" :style="[navbarInnerStyle]">
				<view class="u-back-wrap">
					<view class="u-icon-wrap u-back-text u-line-1" :style="[navTitleStyle]">{{ navTitle || '' }}</view>
				</view>
				<view hover-class="hover-search" class="search-box u-flex u-row-center u-col-center u-m-r-30" @tap="$Router.push('/pages/public/search')">
					<view class="u-iconfont uicon-search" style="color: #fff"></view>
				</view>
			</view>
		</view> -->
		<!-- 轮播组件 -->
		<swiper class="screen-swiper square-dot" style="height: 520rpx" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000" duration="500">
			<swiper-item v-for="(item,index) in list" :key="index">
				<image :src="item.image" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();
let menuButtonInfo = {};
// menuButtonInfo = uni.getMenuButtonBoundingClientRect()
	export default {
		props: {
			list: {
				type: Array,
				default() {
					return []
				}
			},
			navTitle: {
				type: String,
				default: 'shop商城'
			},
			// 标题样式
			navTitleStyle: {
				type: Object,
				default: () => {
					return {
						color: '#fff',
						fontSize: '38rpx'
					}
				}
			}
		},
		data() {
			return {
				statusBarHeight: systemInfo.statusBarHeight,
				navbarHeight: 44
			}
		},
		onLoad() {
			console.log(this.list)
		},
		computed: {
			// 导航栏内部盒子的样式
			navbarInnerStyle() {
				let style = {};
				style.height = this.navbarHeight + 'px';
				let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
				style.marginRight = rightButtonWidth + 'px';
				return style;
			},
			// 导航栏样式
			navbarInnerStyle() {
				let style = {};
				style.height = this.navbarHeight + 'px';
				// #ifdef MP
				let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
				style.marginRight = rightButtonWidth + 'px';
				// #endif
				return style;
			},
			// 整个导航栏的样式
			navbarStyle() {
				let style = {};
				// style.zIndex = this.$u.zIndex.navbar;
				style.background = this.changeNavBackground ? `url(${this.navBgImage}) no-repeat top / 100% auto` : 'none';
				Object.assign(style, this.background);
				return style;
			},
			
		}
		
	}
</script>

<style lang="scss" scoped>
	// 轮播
	.banner-swiper-wrap {
		height: 520rpx;
		position: relative;
		z-index: 100;
		.search-box {
			width: 66rpx;
			height: 66rpx;
			background: rgba(#000, 0.18);
			border-radius: 100%;
		}
	}
	
	.u-navbar-fixed {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 991;
	}
</style>   